<template>
    <div class="hs-panel hs-bg-card">

        <div class="hs-filter-container">
            <el-input @keyup.enter.native="handleFilter"
                      class="hs-filter-item" placeholder=""
                      v-model="listQuery.name"> </el-input>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button v-permission="'${className?uncap_first}:add'"
                       style="float:right" @click="handleAdd"
                       type="primary" icon="el-icon-plus" circle>
            </el-button>
        </div>

        <el-table :data="list" v-loading.body="listLoading"
                  border fit
                  highlight-current-row
                  style="width: 100%; margin: 10px 0;">
            <el-table-column type="index" width="50" label="序号"> </el-table-column>
          <#if columns??>
          <#list columns as column>

              <el-table-column width="200" label="${column.remark}" prop="${column.attrname}">
              </el-table-column>
          </#list>
          </#if>
            <el-table-column align="center" label="操作" fixed="right" width="170">
                <template slot-scope="scope">
                    <el-button v-permission="'${className?uncap_first}:update'" size="small" type="primary" icon="el-icon-edit" circle @click="handleUpdate(scope.row)">
                    </el-button>
                    <el-button v-permission="'${className?uncap_first}:delete'" size="small" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)">
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page.sync="listQuery.pageNum"
                           :page-sizes="[20,30,50]"
                           :page-size="listQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="textMap[editDialog.type]"
                   :visible.sync="editDialog.show">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">

              <#if columns??>
              <#list columns as column>
                    <el-form-item label="${column.remark}" prop="${column.attrname}">
                        <el-input v-model="form.${column.attrname}" placeholder="请输入${column.remark}" > </el-input>
                    </el-form-item>
              </#list>
              </#if>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { page, addObj, delObj, putObj } from 'api/${moduleName}/${className?uncap_first}'
import { mapGetters } from 'vuex'

export default {
  name: '${className}',
  components: {},
  data() {
    return {
      form: {
        name: undefined,
        description: undefined
      },
      rules: {
        name: [
          {required: true, message: '请输入姓名（昵称）', trigger: 'blur'}
        ],
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        name: undefined
      },
      editDialog: {
        type: undefined,
        show: false
      },
      textMap: {
        update: '编辑',
        create: '创建'
      }
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapGetters({
      elements: 'userElements'
    })
  },
  methods: {
    getList() {
      this.listLoading = true
      page(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.getList().then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = val
        this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pagePage = val
      this.getList()
    },
    handleAdd() {
      this.editDialog.type = 'create'
      this.editDialog.show = true
    },
    handleUpdate(row) {
      this.form = row
      delete this.form.createdAt
      delete this.form.updatedAt
      this.editDialog.type = 'update'
      this.editDialog.show = true
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该项(' + row.modelEvaluatename + '), 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(row.id).then(() => {
          this.$message.success('删除成功')
          const index = this.list.indexOf(row)
          this.list.splice(index, 1)
        })
      })
    },
    submit() {
      this.refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id > 0) {
            this.update()
          } else {
            this.add()
          }
        }
      })
    },
    add() {
      addObj(this.form).then(response => {
        let success = parseInt(response.code) === 0
        if (success) {
          this.complete()
        }
      })
    },
    update() {
      putObj(this.form.id, this.form).then(response => {
        let success = parseInt(response.code) === 0
        if (success) {
          this.complete()
        }
      })
    },
    dialogCancel() {
      this.editDialog.show = false
      this.$refs['form'].resetFields()
    },
    complete() {
      this.getList()
      this.dialogCancel()
      this.$message.success('操作成功')
    }
  }
}
</script>
